<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .menu-page #sidebar {
            width: 250px;
            height: 100%;
            position: fixed;
            top: 0;
            left: -250px;
            background-color: #f8f9fa;
            transition: left 0.3s ease;
        }
        .menu-page #sidebar.active {
            left: 0;
        }
        .menu-page #toggleButton {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background-color: #4F46E5;
            color: white;
            padding: 10px;
            border-radius: 50%;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease;
        }
        .menu-page #toggleButton:hover {
            background-color: #3730A3;
        }
    </style>
</head>
<body class="menu-page bg-gray-100 h-screen">
    <!-- Sidebar -->
    <div id="sidebar" class="shadow-md p-4">
        <h2 class="text-2xl font-bold mb-4">选择菜单</h2>
        <ul>
            <li class="mb-4"><a href="/" class="text-blue-500">抽取术语</a></li>
            <li class="mb-4"><a href="/square" class="text-blue-500">广场</a></li>
            <li class="mb-4"><a href="/profile" class="text-blue-500">个人主页</a></li>
            <li class="mb-4"><a href="/login" class="text-blue-500">登录</a></li>
        </ul>
    </div>

    <!-- Content -->
    {% block content %}
    {% endblock %}

    <!-- Menu Button -->
    <button id="toggleButton" aria-label="open/close menu">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
    </button>

    <script>
        const toggleButton = document.getElementById("toggleButton");
        const sidebar = document.getElementById("sidebar");

        toggleButton.addEventListener("click", function () {
            sidebar.classList.toggle("active");
        });
    </script>
</body>
</html>


{#{% extends "menu.html" %}#}
{#{% block title %}术语抽取{% endblock %}#}
{#{% block content %}#}
{#{% endblock %}#}